<template>
  <div>
    <twoHead title="换肤中心"></twoHead>
    <div class="info">
      <div
        v-for="(v, i) in list"
        :class="'item' + (i + 1)"
        :key="i"
        @click="change(v.val)"
      >
        <div class="lxx"></div>
        <p>{{ v.txt }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      list: [
        { val: "primary1", txt: "活力黄" },
        { val: "primary2", txt: "天际蓝" },
        { val: "primary3", txt: "高雅红" },
        { val: "primary4", txt: "炫酷黑" },
      ],
    };
  },
  methods: {
    ...mapMutations(["setPrimary"]),
    change(value) {
      this.setPrimary(value);
      localStorage.setItem('primary',value);
    },
  },
  computed: {
    ...mapState(["primary"]),
  },
};
</script>

<style lang="scss" scoped>
.info {
  margin-top: 20px;
  background: #fefefe;
  padding-top: 20px;
  height: 75vh;
  .item1 {
    margin: auto;
    width: 80%;
    height: 100px;
    color: #f9b90f;
    div {
      background: #f9b90f;
    }
  }
  .item2 {
    margin: auto;
    width: 80%;
    height: 100px;
    color: #6699dd;
    div {
      background: #6699dd;
    }
  }
  .item3 {
    margin: auto;
    width: 80%;
    height: 100px;
    color: #c20c0c;
    div {
      background: #c20c0c;
    }
  }
  .item4 {
    margin: auto;
    width: 80%;
    height: 100px;
    color: #ccc;
    div {
      background: #000;
    }
  }
  .lxx {
    padding: 20px;
    margin: 10px;
    width: 100%;
    height: 80%;
    box-sizing: border-box;
  }
}
</style>